<template>
  <div id="d1">
    <top></top>
    <datePicker></datePicker>
    <h1>建议留言板</h1>
    <form>
      <ul class="addMsg">
        <li>
          <label>用户名:</label>
          <input type="text" v-model="obj.userName">
        </li>
        <li>
          <label>年 龄: </label>
          <input type="text" v-model="obj.userAge">
        </li>
        <li>
          <label>留 言:</label>
          <textarea cols="22" rows="2" v-model="obj.userMsg"></textarea>
        </li>
        <li>
          <button type="button" @click="handleClickAdd">添加</button>
          <button type="reset">重置</button>
        </li>
      </ul>
    </form>
    <div>
      <table>
        <thead>
          <tr>
            <th>序 号</th>
            <th>用户名</th>
            <th>年 龄</th>
            <th>留 言</th>
            <th>操 作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(v,k,index) in list" :key="index">
            <td>{{k}}</td>
            <td v-for="(v2,k2) in v" :key="k2">{{v2}}</td>
            <td>
              <button type="button" @click="handleClickDel(k)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import top from './header'
import datePicker from './datePicker'
export default {
  data() {
    return {
      obj: {},
      list: []
    }
  },
  components:{
    'top':top,
    datePicker:datePicker
  },
  methods: {
    handleClickAdd: function() {
      this.list.push(this.obj)
      this.obj={}
    },
    handleClickDel: function(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>
<style scoped>
ul {
  list-style-type: none;
}

#d1 {
  width: 40vw;
  min-width: 500px;
  padding: 5px 10px 20px;
  border-radius: 5px;
  border: 1px solid #666;
  margin: 0 auto;
}

.addMsg label {
  display: inline-block;
  width: 60px;
}

.addMsg li {
  padding: 5px;
}

input,
textarea {
  border-radius: 5px;
  padding: 5px;
  outline: none
}

button {
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 5px 10px;
  color: #ffffff;
  background-color: #2222aa
}

button+button {
  background-color: #cc3355
}

textarea {
  resize: none;
  width: 167px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

th,
td {
  padding: 5px 10px;
  text-align: center;
  border: 1px solid #666;
}

th:nth-child(4) {
  width: 180px
}

td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: overflow;
}
</style>
